<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用css自定义滚动条样式</title>
  <style>
    /** https://webkit.org/blog/363/styling-scrollbars/*/
    html {
      width:30px;
    }
    body{
      margin:0;
    }
    /** 一旦::-webkit-scrollbar伪类样式中有不为display: none;的其它任何设置,自定义样式就生效了*/
    body::-webkit-scrollbar {
      /*display: none;*/
    }
    /*↑↓ display: none;设置在body和html中是等效,但还是推荐设置在html上*/
    /*
      但其实这个滚动条应该在浏览器视口上 详见 最外层的滚动条到底在哪个元素上/00.html
    */
    html::-webkit-scrollbar {
      /** ↓会隐藏滚动条,但并不影响滚动*/
      /*display: none;*/
      overflow: auto;

      /*
        The width and height properties on the scrollbar element indicate the width of the vertical scrollbar and the height of the horizontal scrollbar. Percentages can be specified for these values as well, in which case the scrollbar will consume that percentage of the viewport area.
      */
      width:30px; /*垂直滚动条宽度*/
      height: 15px; /*横向滚动条高度*/
      background:darkred; /* or add it to the track */
    }


    /*
      A scrollbar consists of scrollbar buttons and a track. The track itself is further subdivided into track pieces and a thumb. The track pieces represent the areas above and below the thumb.

      In addition the scrollbar corner can now be styled, as well as the resizer used by resizable textareas.

      Here is a complete list of all the new pseudo-elements. All of these pseudo-elements must be prefixed with -webkit-.

      Each of these objects can be styled with borders, shadows, background images, and so on to create completely custom scrollbars that will still honor the settings of the operating system as far as button placement and click behavior.
    */
    /** 上下箭头*/
    html::-webkit-scrollbar-button{

    }

    /** 滚动条上的滚动滑块.*/
    html::-webkit-scrollbar-thumb {
      background:#000;
    }

    /** 滚动条轨道*/
    html::-webkit-scrollbar-track{

    }

    /** 滚动条没有滑块的轨道部分*/
    html::-webkit-scrollbar-track-piece{

    }

    /** 当同时有垂直滚动条和水平滚动条时交汇的部分.*/
    html::-webkit-scrollbar-corner{

    }

    /** 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).*/
    html::-webkit-resizer{

    }

    /* The following pseudo classes have been introduced and can be applied to the pseudo-elements.*/
    /* 下面还有一些伪类样式可以应用于上面所介绍的伪类元素上 具体参看*/
    /* https://webkit.org/blog/363/styling-scrollbars/*/
    /* 或则参看本文件夹下的 webkit-scrollbar伪类元素的伪类样式 */
  </style>
</head>
<body>
<div class="first-div">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>

<script>
/** css可以自定义滚动条,但各厂家之间写法不兼容
  firefox:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars 只支持width(仅支持3个值)和color
  chrome:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 功能最强大
  ie:https://developer.mozilla.org/en-US/docs/Web/CSS/Microsoft_extensions 最早提出 但又自主废弃了大部分
*/
</script>
</body>
</html>
